<toaster-container></toaster-container>
<h3>{{name}}</h3>
<hr>
<!-- Reports Table -->
<div class="row">
    <div class="col-md-7 bold">
        Governance Report Name
    </div>
    <div class="col-md-5 bold">
        Actions
    </div>
</div>
<div class="row cardStart card-body shadow">
    <div class="cellValue col-md-7">
        <span *ngIf="hasBusinessAndFinancialProfile == false">
            The company does not have a Business and Financial Profile            
        </span>
        <span *ngIf="hasBusinessAndFinancialProfile == true">
            {{businessAndFinancialProfile.corporateGovernancePdfProfileString}} -
            {{businessAndFinancialProfile.updateOperationTypeString}} on:
            {{businessAndFinancialProfile.lastOperationDate | date: 'MMM d, y'}}
        </span>
    </div>
    <div class="cellValue col-md-5">
        <input type="file" #selectedBusinessAndFinancial ng2FileSelect [ngStyle]="{'display': hasBusinessAndFinancialProfile == true ? 'none' : 'inherit'}" [uploader]="businessAndFinancialUploader" style="width:80%" accept=".pdf"/> 
        <span *ngIf="hasBusinessAndFinancialProfile == true">
            <button class="btn btn-sm btn-primary-dark" (click)="openUploader(governancePdfType.BusinessAndFinancialProfile)">Edit</button>
            <button class="btn btn-sm btn-primary-dark ml-2" (click)="deleteReport(governancePdfType.BusinessAndFinancialProfile)">Delete</button>
            <button class="btn btn-sm btn-primary-dark ml-2" (click)="downloadPdf(governancePdfType.BusinessAndFinancialProfile)">Download Pdf</button>
        </span>
    </div>            
</div>    

<div class="row cardStart card-body shadow mt-3">
    <div class="cellValue col-md-7">
        <span *ngIf="hasGovernanceDataProfile == false">
            The company does not have a Corporate Data Profile          
        </span>
        <span *ngIf="hasGovernanceDataProfile == true">
            {{governanceDataProfile.corporateGovernancePdfProfileString}} -
            {{governanceDataProfile.updateOperationTypeString}} on:
            {{governanceDataProfile.lastOperationDate | date: 'MMM d, y'}}
        </span>
    </div>
    <div class="cellValue col-md-5">
        <input type="file" #selectedGovernance ng2FileSelect [ngStyle]="{'display': hasGovernanceDataProfile == true ? 'none' : 'inherit'}" [uploader]="governanceDataUploader" style="width:80%" accept=".pdf"/>     
        <span *ngIf="hasBusinessAndFinancialProfile == true">
            <button class="btn btn-sm btn-primary-dark" (click)="openUploader(governancePdfType.GovernanceDataProfile)">Edit</button>
            <button class="btn btn-sm btn-primary-dark ml-2" (click)="deleteReport(governancePdfType.GovernanceDataProfile)">Delete</button>
            <button class="btn btn-sm btn-primary-dark ml-2" (click)="downloadPdf(governancePdfType.GovernanceDataProfile)">Download Pdf</button>
        </span>
    </div>            
</div>    

<div *ngIf="hasProfile" class="mt-3">
    Company has full profile: 
    <span style="font-weight:bold;">{{profile.fullProfile ? 'YES' : 'NO' }}</span>
</div>

<h6 class="mt-5">Insights</h6>
<!-- Insights Table -->
<sustainalytics-table #insightsTable [columns]="columns" [source]="insights" [elementCount]="count" [paginationPositionDisplay]="paginationPosition"
  [displayTitle]="false" (buttonClicked)="onButtonClicked($event)">
</sustainalytics-table>

<button class="btn btn-primary-dark" (click)="addInsight()">Add Insight</button>

<!-- Edit modal -->
<app-modal #editModal [id]="'editModal'" [size]="'modal-xl'" [showCloseButton]=false>
    <div class="app-modal-header">
        Add/Edit Insight
    </div>
    <div class="app-modal-body">
        <div class="row">
            <div class="col-md-3">Company Name</div>
            <div class="col-md-9 bold">{{name}}</div>
        </div>
        <span *ngIf="insight">
            <div class="row mt-3">
                <div class="col-md-3">Publication Date</div>
                <div class="col-md-7">
                    <input class="form-control" bsDatepicker [bsConfig]="{ containerClass: 'theme-default' }" [(ngModel)]="insight.publicationDate">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-3">Title</div>
                <div class="col-md-7">
                    <input class="form-control" [(ngModel)]="insight.title">
                </div>
            </div>
            <div class="row mt-3">
                <span *ngIf="showInsightFile">{{insight.fileName}}</span>
                <input type="file" #selectedInsight ng2FileSelect [uploader]="insightUploader" style="width:80%" accept=".pdf"/> 
            </div>
        </span>
    </div>
    <div class="app-modal-footer">
        <button class="btn btn-transparent" (click)="this.editModal.hide()">Cancel</button>
        <button *ngIf="insight" class="btn btn-primary-dark" (click)="saveInsight()" [disabled]="insight.fileId == undefined">Save Changes</button>
    </div>
</app-modal>